[#escape x as (x)!?html]
<form id="mobileMessageForm" action="${api}/user/send-sms-code" method="post">
  <div class="modal-body">
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-append">
           <div id="mobile-captcha-containerId"></div>
           <input type="hidden" name="captchaVerification" id="mobileCaptchaVerification">
           <button id="mobileCaptchaBtn" class="d-none"></button>
        </div>
        <script>
          $('#mobile-captcha-containerId').slideVerify({                                                
            baseUrl:'${base}',  //服务器请求地址;
            containerId:'mobileCaptchaBtn',//pop模式 必填 被点击之后出现行为验证码的元素id
            mode:'pop',     //展示模式
            imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
                width: '400px',
                height: '200px',
            },
            barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
                width: '400px',
                height: '40px',                                                                                                                                                                                                                                                                                                                                               
            },
            beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
                let flag = true;
                //实现: 参数合法性的判断逻辑, 返回一个boolean值
                return flag
            },
            ready : function() {},  //加载完毕的回调
            success : function(params) { //成功的回调
                // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
                //例如: login($.extend({}, params))
                $("#mobileCaptchaVerification").val(params.captchaVerification)
                $("#mobileMessageForm").submit()
            },
            error : function() {
              alertTip("验证码错误");
            }        //失败的回调
        }); 
        </script>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <input type="hidden" id="mobileReceiver" name="mobile"/>
    <input type="hidden" id="mobileScene" name="scene"/>
  </div>
</form>
  <script>
    function sendMobileMessage(element, scene) {
        $('#mobileCaptcha').val('');
        $('#mobileReceiver').val(element.val());
        $('#mobileScene').val(scene);
        $("#mobileCaptchaBtn").click()
    }
    $('#mobileMessageForm').validate({
      submitHandler: function (form) {
        request.post(form.action, $(form).serializeJSON()).then(function (response) {
          var data = response.data;
          if(data.result == null) return;
        });
      }
    });
  </script>

  <form id="emailMessageForm" action="${api}/user/send-email-code" method="post">
    <div class="modal-body">
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-append">
            <div id="email-captcha-containerId"></div>
            <input type="hidden" name="captchaVerification" id="emailCaptchaVerification">
            <button id="emailCaptchaBtn" class="d-none"></button>
          </div>
          <script>
            $('#email-captcha-containerId').slideVerify({                                                
              baseUrl:'${base}',  //服务器请求地址;
              containerId:'emailCaptchaBtn',//pop模式 必填 被点击之后出现行为验证码的元素id
              mode:'pop',     //展示模式
              imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
                  width: '400px',
                  height: '200px',
              },
              barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
                  width: '400px',
                  height: '40px',                                                                                                                                                                                                                                                                                                                                               
              },
              beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
                  let flag = true;
                  //实现: 参数合法性的判断逻辑, 返回一个boolean值
                  return flag
              },
              ready : function() {},  //加载完毕的回调
              success : function(params) { //成功的回调
                  // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
                  $("#emailCaptchaVerification").val(params.captchaVerification)
                  $("#emailMessageForm").submit()
                  successTip('发送验证码成功');
              },
              error : function() {
                alertTip("验证码错误");
              }
          }); 
          </script>       
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <input type="hidden" id="emailReceiver" name="email"/>
      <input type="hidden" id="emailScene"  name="scene"/>
    </div>
  </form>
  <script>
    function sendEmailMessage(element,scene) {
      $('#emailCaptchaVerification').val('');
      $('#emailReceiver').val(element.val());
      $('#emailScene').val(scene);
      $("#emailCaptchaBtn").click()
    }
    $('#emailMessageForm').validate({
      submitHandler: function (form) {
        request.post(form.action, $(form).serializeJSON()).then(function (response) {
          var data = response.data;
          if(data.result == null) return;
        });
      }
    });
  </script>
[/#escape]
